Component({
  properties: {
    show: {
      type: Boolean,
      value: false,
      observer(newVal) {
        if (newVal) {
          this.setData({
            show2: newVal
          })
          setTimeout(() => {
            this.modalfn('0%')
            this.maskfn(1)
          }, 100)
        } else {
          this.modalfn('100%')
          this.maskfn(0)
          setTimeout(() => {
            this.setData({
              show2: newVal
            })
          }, 100)
        }
      }
    }
  },
  data: {
    animationData: {},
    maskdata: {},
    show2: false,
  },
  attached() {
    this.animation = wx.createAnimation({
      duration: 300,
      timingFunction: 'ease'
    });
  },
  methods: {
    maskfn(num) {
      let animation = wx.createAnimation({
        duration: 300, // 动画时长
        timingFunction: 'ease' // 动画效果
      });
      animation.opacity(num).step();
      this.setData({
        maskdata: animation.export(),
      });
    },
    modalfn(num) {
      let animation = wx.createAnimation({
        duration: 300,
        timingFunction: 'ease'
      });
      animation.translateY(num).step();
      this.setData({
        animationData: animation.export(),
      });
    },
    onMaskTap() {
      this.modalfn('100%')
      this.maskfn(0)
      setTimeout(() => {
        this.triggerEvent('customEvent');
      }, 100);
    }
  }
});